<template>
  <span>
    <!-- 右键菜单 -->
    <!-- <contextMenuComp :contextMenuBts="contextMenuNodeBts" :contextMenuDomId="contextMenuDomId"></contextMenuComp> -->

    <!-- 弹出对话框  -->
    <div id="topo-contextMenu-dialog" style="display:none">
      <component :is="currentViewComp" :currentMapElementData="currentMapElementData" transition="fade" transition-mode="out-in" keep-alive :scriptResult="scriptResult" @transferCloseDialog="transferCloseDialog" @transferModifiedNode="transferModifiedNode"></component>
    </div>
  </span>
</template>
<script>
import eventHubs from 'common/eventHubs'
import resType from 'common/resTypeEnum'
import { TOPO_TYPE_TOPO } from 'common/resTypeEnum'
import art from 'utils/artdialog'
import topoApi from 'api/topo'
import scriptApi from 'api/script'
import btnEvent from 'common/topo/btnEvent'

import modifyhostComp from './modifyHostInfo.vue'
import modifyLinkComp from './modifyLink.vue'
import exchangeRuijieComp from './exchange_ruijie.vue'
import scriptResultComp from './scriptResult.vue'
import devicePropComp from 'views/device/deviceProp.vue'
import routerTableComp from 'views/device/routerTable.vue'

import cxmenu from 'common/topo/topoMenu.js'
export default {
  data() {
    return {
      graphView: null,
      contextMenuDomId: 'contextmenu-node',
      contextMenuNodeBts: [],
      contextMenuLinkBts: [],
      currentViewComp: modifyhostComp,
      scriptResult: '',
      currentMapElementData: {},
      currentNodeOrLink: null,
      modifyHostDialog: null,
      modifyLinkDialog: null,
      pingDialog: null,
      traceRouteDialog: null,
      portStateDialog: null,
      devicePropDialog: null,
      routerTableDialog: null
    }
  },
  created() {
    const self = this;
    eventHubs.getEventHub().$on('topoGraphView', (topoGraphView) => {
      self.graphView = topoGraphView;
      self.initContextMenu();
    });
  },
  mounted() {
    // this.initContextMenu();
    // this.addEventListener();
    // this.handleEvent();
  },
  components: {
    // contextMenuComp,
    modifyhostComp, modifyLinkComp, exchangeRuijieComp, scriptResultComp, devicePropComp
  },
  methods: {
    initContextMenu() {
      const self = this;
      let menu = cxmenu//设置菜单动作action
      //修改设备信息
      menu.editDeviceMenu.action = function(item, e) {
        console.log('修改设备信息')
        self.getEleData(self, e)
        if (self.currentMapElementData) {
          self.currentViewComp = modifyhostComp;
          self.modifyHostDialog = art.artdialog('修改设备信息', $('#topo-contextMenu-dialog'), 600, 400, 'topodialog');
          self.$store.dispatch('setCurMapElement', self.currentMapElementData);
        }
      }
      //设备面板图
      menu.interfaceMenu.action = function(item, e) {
        console.log('设备面板图')
        self.getEleData(self, e)
        if (self.currentMapElementData) {
          self.currentViewComp = exchangeRuijieComp;
          self.portStateDialog = art.artdialog('设备面板图', $('#topo-contextMenu-dialog'), 1000, 500, 'topodialog');
        }
      }
      //设备属性
      menu.propertyMenu.action = function(item, e) {
        console.log('设备属性')
        self.getEleData(self, e)
        if (self.currentMapElementData) {
          self.currentViewComp = devicePropComp;
          self.devicePropDialog = art.artdialog('属性', $('#topo-contextMenu-dialog'), 400, 220, 'devicePropDialog');
        }
      }

      //修改连接关系
      menu.editLinkMenu.action = function(item, e) {
        console.log('修改连接关系')
        self.getEleData(self, e)
        if (self.currentMapElementData) {
          self.currentViewComp = modifyLinkComp;
          self.modfiyLinkDialog = art.artdialog('修改连接关系', $('#topo-contextMenu-dialog'), 600, 400, 'topodialog');
        }
      }
      // Ping
      menu.pingMenu.action = function(item, e) {
        console.log('Ping')
        self.getEleData(self, e)
        if (self.currentMapElementData) {
          let scriptData = {};
          scriptData.name = 'ping';
          scriptData.ipaddress = self.currentMapElementData.label;
          scriptData.result = '';
          scriptApi.executeScript(scriptData).then(response => {
            self.scriptResult = response.data.result;
          }).catch(err => {
            self.$message({ type: 'warning', message: self.$t('execute failed') + err });
          });
          // setTimeout(() => {self.pinghostDialog = true;}, 1500);
          self.currentViewComp = scriptResultComp;
          self.pingDialog = art.artdialog('Ping执行结果', $('#topo-contextMenu-dialog'), 600, 250, 'topodialog');
        }
      }

      // traceroute
      menu.tracerouteMenu.action = function(item, e) {
        console.log('traceroute')
        self.getEleData(self, e)
        if (self.currentMapElementData) {
          self.scriptResult = '';
          let scriptData = {};
          scriptData.name = 'traceroute';
          scriptData.ipaddress = self.currentMapElementData.label;
          scriptData.result = '';
          scriptApi.executeScript(scriptData).then(response => {
            self.scriptResult = response.data.result;
          }).catch(err => {
            self.$message({ type: 'warning', message: self.$t('execute failed') + err });
          });

          self.currentViewComp = scriptResultComp;
          self.traceRouteDialog = art.artdialog('Traceroute执行结果', $('#topo-contextMenu-dialog'), 600, 250, 'topodialog');
        }
      }

      // telnet
      menu.telentMenu.action = function(item, e) {
        console.log('telnet')
        self.getEleData(self, e)
        if (self.currentMapElementData) {
          self.scriptResult = '';
          let scriptData = {};
          scriptData.name = 'telent';
          scriptData.ipaddress = self.currentMapElementData.label;
          scriptData.result = '';
          scriptApi.executeScript(scriptData).then(response => {
            self.scriptResult = response.data.result;
          }).catch(err => {
            self.$message({ type: 'warning', message: self.$t('execute failed') + err });
          });

          self.currentViewComp = scriptResultComp;
          self.traceRouteDialog = art.artdialog('Telent执行结果', $('#topo-contextMenu-dialog'), 600, 250, 'topodialog');
        }
      }


      //删除拓扑图元素
      menu.delEleMenu.action = function(item, e) {
        console.log('删除')
        const message = { success: self.$t('Deleted Successfully'), failed: self.$t('Failed to delete'), info: self.$t('Cancel to delete') };
        btnEvent.deleteMapElement(self.graphView, message);
      }

      // 查看子拓扑
      menu.subtopoMenu.action = function(item, e) {
        console.log('查看子拓扑')
        self.getEleData(self, e)
        if (self.currentMapElementData) {
          const routerStr = '/topo/topoMgm';
          const sysmapid = self.currentMapElementData.elementid;
          self.$router.push({ path: routerStr, query: { sysmapid: sysmapid } });

          eventHubs.getEventHub().$emit("sysmapidChange", sysmapid);
          self.$store.dispatch('setCurSysmapid', sysmapid);
          eventHubs.getEventHub().$emit("collapsedChange", true);
          self.$store.dispatch('changeCollapse', true);
        }
      }

      // 路由表
      menu.routetableMenu.action = function(item, e) {
        console.log('路由表')
        self.getEleData(self, e)
        if (self.currentMapElementData) {
          self.currentViewComp = routerTableComp;
          self.routerTableDialog = art.artdialog('路由表', $('#topo-contextMenu-dialog'), 800, 650, 'routerTableDialog');
        }
      }

      // 资产记录
      menu.routetableMenu.action = function(item, e) {
        console.log('资产记录')
        self.getEleData(self, e)
        if (self.currentMapElementData) {
          self.currentViewComp = routerTableComp;
          self.routerTableDialog = art.artdialog('路由表', $('#topo-contextMenu-dialog'), 800, 650, 'routerTableDialog');
        }
      }
      // 初始化右键菜单
      menu.init(TOPO_TYPE_TOPO, self.graphView,self)
    },
    //获取鼠标点击时的元素数据
    getEleData(self, e) {
      let eles = self.graphView.getDataModel().getSelectionModel().getSelection()
      if (eles != null && eles.length == 1) {
        self.currentNodeOrLink = eles.get(0);
        if (self.currentNodeOrLink) {
          const nodeOrLink = self.currentNodeOrLink._attrObject;
          let nodeOrLinkData = null;
          if (nodeOrLink != undefined && nodeOrLink != null) {
            nodeOrLinkData = nodeOrLink.data;
            nodeOrLinkData.elementtypeName = self.getElementNameByType(nodeOrLinkData.elementtype);
            self.currentMapElementData = nodeOrLinkData;
          }
        } else {
          self.currentNodeOrLink = null
        }
      }
    },
    getElementNameByType(elementtype) {
      return resType.getElementNameByType(elementtype);
    },
    isObjBlank(obj) {
      return (obj === null) || (obj === undefined) || (obj === '');
    },
    closeDialog() {
      if (this.modifyHostDialog != null) {
        this.modifyHostDialog.close();
      }
      if (this.modifyLinkDialog != null) {
        this.modifyLinkDialog.close();
      }
      if (this.pingDialog != null) {
        this.pingDialog.close();
      }
      if (this.traceRouteDialog != null) {
        this.traceRouteDialog.close();
      }
      if (this.portStateDialog != null) {
        this.portStateDialog.close();
      }
      if (this.devicePropDialog != null) {
        this.devicePropDialog.close();
      }
      if (this.routerTableDialog != null) {
        this.routerTableDialog.close();
      }
    },
    transferCloseDialog(msg) {
      this.closeDialog();
      this.$message(msg);
    },
    transferModifiedNode(transferData) {
      const modifiedNode = transferData.modifiedNode;
      const newIcon = transferData.newIcon;

      const dataModel = this.graphView.getDataModel();
      const data = dataModel.getDataById(modifiedNode.selementid);
      data.setImage('data:image/png;base64,' + newIcon.image);
      this.closeDialog();
    }
  }
}
</script>
